<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>发送 AJAX 请求</title>
  </head>
  <body>
    <script>
      // 发送 AJAX 请求 返回结果为promise对象
      function sedAJAX(url) {
        return new Promise((resolve, reject) => {
          // 1.创建对象
          const x = new XMLHttpRequest();
          // 2. 初始化
          x.open("GET", url);
          // 3. 发送请求
          x.send();
          // 4. 事件绑定
          x.onreadystatechange = function () {
            if (x.readyState === 4) {
              if (x.status >= 200 && x.status < 300) {
                // 成功了
                resolve(x.response);
              } else {
                // 失败
                reject(x.status);
              }
            }
          };
        });
      }
      // Promise then方法测试
      sedAJAX("").then((value) => {
        console.log(value);
      });
      sedAJAX("").then((value) => {
        console.log(value);
      });

      // async与 await 测试
      async function main() {
        // 获取数据 await能得到后面promise成功的数据
        let result1 = await sedAJAX("https://api.apiopen.top/getJoke");
        console.log(result1);
        let reslut2 = await sedAJAX("");
        console.log(reslut2);
      }
      main();
    </script>
  </body>
</html>
